<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>大屏组件开发</title>
    <link href="./css/index.css" rel="stylesheet"/>
</head>
<body>
<!--头部盒子-->
<header>
    <h1>广西广投综合能源管理有限公司场站运行情况日报</h1>
    <div class="showTime">123456</div>
    <script>
        function time() {
            const dt = new Date();
            const y = dt.getFullYear();
            const mt = dt.getMonth() + 1;
            const day = dt.getDate();
            const h = dt.getHours();
            const m = dt.getMinutes();
            const s = dt.getSeconds();
            document.querySelector(".showTime").innerHTML =
                `当前时间：${y}年${mt}月${day}日${h}时${m}分${s}秒`;
        }

        setInterval(time, 1000); //设定定时器，循环运行
        time(); //立即运行一次以显示当前时间
    </script>
</header>
<section class="mainBox">
    <div class="container">
        <!--布局规划-->
        <div class="column" style="flex: 4;">
            <div class="panel">
                <div class="panel-footer">
                    <div class="no">
                        <div class="no-bd">
                            <ul>
                                <li>项目名称</li>
                                <li>装机容量（MWp）</li>
                                <li>昨日发电量（万kW.h）</li>
                                <li>当月累计发电量（万kW.h）</li>
                                <li>当年累计发电量（万kW.h）</li>
                                <li>历年累计发电量（万kW.h）</li>
                                <li>当日等效利用小时数</li>
                            </ul>
                        </div>
                        <div class="no-hd" id="data-container">
                            <!-- 动态内容将插入到这里 -->
                        </div>
                    </div>
                    <script src="./js/data.js"></script>
                </div>
            </div>
        </div>
        <div class="column" style="flex: 1;">
            <div class="panel line">
                123
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="column" style="flex: 4;">
            <div class="panel">
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="column" style="flex: 1;">
            <div class="panel bar">
                <h2>电站充电次数</h2>
                <div class="chart">
                </div>
                <div class="panel-footer">
                </div>
            </div>
        </div>
    </div>
</section>
<!--</section>-->
<!-- 页面主体部分 -->
<!--<section class="mainBox">-->
<!--    <div class="column half">-->
<!--        <div class="no">-->
<!--            <div class="no-bd">-->
<!--                <ul>-->
<!--                    <li>项目名称</li>-->
<!--                    <li>装机容量（MWp）</li>-->
<!--                    <li>日发电量（万kW.h）</li>-->
<!--                    <li>月发电量（万kW.h）</li>-->
<!--                    <li>年发电量（万kW.h）</li>-->
<!--                    <li>累计发电量（万kW.h）</li>-->
<!--                    <li>当日等效利用小时数</li>-->
<!--                </ul>-->
<!--            </div>-->
<!--            <div class="no-hd" id="data-container">-->
<!--                &lt;!&ndash; 动态内容将插入到这里 &ndash;&gt;-->
<!--            </div>-->
<!--            <div class="panel-footer"></div>-->
<!--        </div>-->
<!--        <script src="./js/data.js"></script>-->

<!--        <div class="panel bing">-->
<!--            <h2>电站充电次数</h2>-->
<!--            <div class="chart">图表</div>-->
<!--            <div class="panel-footer"></div>-->
<!--        </div>-->
<!--        <div class="panel bar">-->
<!--            <h2>柱形图-充电情况</h2>-->
<!--            <div class="chart">图表</div>-->
<!--            <div class="panel-footer"></div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="column half">-->
<!--        <div class="column">-->
<!--            <div class="panel bar">-->
<!--                <h2>昨日情况</h2>-->
<!--                <div class="hang" >-->
<!--                    <div>-->
<!--                        <ul id="titleList1">-->
<!--                            <li>用电量</li>-->
<!--                        </ul>-->
<!--                        <div class="showYesterdayTotal">-->
<!--                            <ul id="dataList1" class="data-list">-->
<!--                                <li id="electricityUsage1"></li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <ul id="titleList2">-->
<!--                            <li>充电次数</li>-->
<!--                        </ul>-->
<!--                        <div class="showYesterdayTotal">-->
<!--                            <ul id="dataList2" class="data-list">-->
<!--                                <li id="chargingCount2"></li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <ul id="titleList3">-->
<!--                            <li>充电时长</li>-->
<!--                        </ul>-->
<!--                        <div class="showYesterdayTotal">-->
<!--                            <ul id="dataList3" class="data-list">-->
<!--                                <li id="chargingDuration3"></li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <ul id="titleList4">-->
<!--                            <li>充电费用</li>-->
<!--                        </ul>-->
<!--                        <div class="showYesterdayTotal">-->
<!--                            <ul id="dataList4" class="data-list">-->
<!--                                <li id="chargingFee4"></li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div class="panel-footer"></div>-->
<!--            </div>-->
<!--            <script src="./js/EveryTotal.js"></script>-->

<!--            <div class="panel line">-->
<!--                <h3 class="project-title">昨日用电top5</h3>-->
<!--                <div class="chart">-->
<!--                    <iframe src="./test/test.html" width="100%" height="200px" frameborder="0" ></iframe>-->
<!--                </div>-->
<!--                <div class="panel-footer"></div>-->
<!--            </div>-->
<!--            <div class="panel bi">-->
<!--                <h2>折线图-电站情况</h2>-->
<!--                <div class="chart">图表</div>-->
<!--                <div class="panel-footer"></div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->


<script src="./js/flexible.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>